import { Card, Table, Image, Switch, Button, Space, Pagination } from 'antd';
import { useEffect, useState } from 'react';
import { getProApi } from '@/api/pro';

import ExportJsonExcel from 'js-export-excel';

const columns = [
  {
    title: '产品名称',
    dataIndex: 'proname',
    width: 200,
  },
  {
    title: '产品图片',
    dataIndex: 'img1',
    render(text: string) {
      return <Image src={text} width={100}></Image>;
    },
  },
  {
    title: '产品分类',
    dataIndex: 'category',
  },
  {
    title: '产品品牌',
    dataIndex: 'brand',
    width: 100,
  },
  {
    title: '产品价格',
    dataIndex: 'originprice',
  },
  {
    title: '产品折扣',
    dataIndex: 'discount',
  },
  {
    title: '产品库存',
    dataIndex: 'stock',
  },
  {
    title: '是否售卖',
    dataIndex: 'issale',
    render(text: number) {
      return <Switch defaultChecked={text === 1}></Switch>;
    },
  },
  {
    title: '是否推荐',
    dataIndex: 'isrecommend',
    render(text: number) {
      return <Switch defaultChecked={text === 1}></Switch>;
    },
  },
  {
    title: '是否秒杀',
    dataIndex: 'isseckill',
    render(text: number) {
      return <Switch defaultChecked={text === 1}></Switch>;
    },
  },
  {
    title: '操作',
    width: 170,
    render() {
      return (
        <Space>
          <Button>编辑</Button>
          <Button danger>删除</Button>
        </Space>
      );
    },
  },
];

const Index = () => {
  const [dataSource, setDataSource] = useState([]);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res: any = await getProApi();

    setDataSource(res.data);
  };

  const fn = () => {
    var option: any = {};

    option.fileName = 'excel';

    option.datas = [
      {
        sheetData: dataSource,
        sheetName: '商品列表',
        sheetFilter: ['proname', 'brand', 'category'],
        sheetHeader: ['商品名称', '商品品牌', '商品分类'],
        columnWidths: [20, 20, 20],
      },
    ];

    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  };

  return (
    <Card extra={<Button onClick={fn}>文件导出</Button>}>
      <Table dataSource={dataSource} columns={columns} rowKey="proid" />
    </Card>
  );
};

export default Index;
